<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    .box {
      width: 100px;
      height: 100px;
    }
    .box1 {
      background-color: tomato;
      /* 元素水平向右移动50px，向下移动50px */
      transform: translate(50px, 50px);
    }
    .box2 {
      background-color: khaki;
    }
  </style>
  <body>
    <!-- TIP
            x 和 y 是长度值，单位可以是 px，也可以是%百分比
            x 表示元素在 x 轴上的位移量，为正表示向右移动，为负表示向左移动
            y 表示元素在 y 轴上的位移量，为正表示向下移动，为负表示向上移动
            位移和相对定位非常像，位移变形也会 "老家留坑"，即会占据原来的位置
            位移不会对其它元素造成影响，相当于悬浮在其它元素上面，因为位移的元素会创建自己的层叠上下文。 -->
    <div class="box box1"></div>
    <div class="box box2"></div>
  </body>
</html>
